/* eslint-disable @typescript-eslint/no-unused-vars */
import { getHistoryDataList } from "@/api/modules/iot/data";
import { shortcuts } from "@/hooks/useTime";
import { dayjs } from "element-plus";
import EmptyImg from "./../../../../assets/images/404.png";
import { Device } from "@/api/interface/iot";
import { ResPage } from "@/api/interface";
export default defineComponent({
	props: {
		title: String,
		dataKey: String,
		sn: String,
		height: {
			type: String,
			default() {
				return "400px";
			}
		}
	},
	emits: [],
	setup(props) {
		const state = reactive<any>({
			dataList: [],
			pageable: {
				pageIndex: 1,
				pageSize: 8,
				total: 0
			},
			timeRange: [null, null]
		});
		onMounted(() => {
			featchDataList();
		});
		//切换分页
		const handleSizeChange = (val: number) => {
			state.pageable.pageIndex = val;
			featchDataList();
		};
		//生成内存分页
		// const pageDataList = computed<any[]>(() => {
		// 	let start = (state.pageable.pageIndex - 1) * state.pageable.pageSize;
		// 	let end = start + state.pageable.pageSize;
		// 	return state.dataList?.slice(start, end) || [];
		// });
		const featchDataList = async () => {
			let res: any = await getHistoryDataList({
				timeOrder: "desc",
				idSn: props.sn || "",
				key: props.dataKey as string,
				keyType: "sensor",
				pageIndex: state.pageable.pageIndex,
				pageSize: state.pageable.pageSize,
				startTime: state.timeRange[0] ? dayjs(state.timeRange[0]).format("YYYY-MM-DD HH:mm:ss") : undefined,
				endTime: state.timeRange[0] ? dayjs(state.timeRange[1]).format("YYYY-MM-DD HH:mm:ss") : undefined
			});
			if (res.result?.records) {
				let result = res.result as ResPage<Device.ResDataInfo[]>;
				state.pageable.total = result.total;
				state.dataList = result.records;
			} else {
				let result = res.result as Device.ResDataInfo[];
				state.pageable.total = result.length;
				state.dataList = result;
			}
		};
		return () => {
			return (
				<div>
					<div class="flex justify-between p-4 items-center">
						<div class="title pl-4 text-base">图片列表</div>
						<div>
							<span class="pr-2">时间范围</span>
							<el-date-picker
								v-model={state.timeRange}
								style="width:340px"
								type="datetimerange"
								shortcuts={shortcuts()}
								range-separator="至"
								start-placeholder="开始时间"
								end-placeholder="结束时间"
								onChange={() => featchDataList()}
							/>
							<el-button class="iconfont iconbx-sync" style="margin-top:-5px" onClick={() => featchDataList()}>
								查询
							</el-button>
						</div>
					</div>
					<div class="history-img-list grid grid-cols-4 gap-4">
						{state.dataList.length ? (
							state.dataList.map((item: any, i: number) => {
								return (
									<div class="history-img-item shadow-md mb-6">
										{item.value ? (
											<view class="empty-container">
												<el-image
													style="width: 100%;height:100%"
													src={item.value}
													hide-on-click-modal
													initial-index={i}
													preview-src-list={state.dataList.map((item: any) => item.value)}
													fit="fill"
												/>
												<view class="text">{item.updateTime}</view>
											</view>
										) : (
											<el-image style="width: 100%;height:200px" src={EmptyImg} fit="fill" />
										)}
									</div>
								);
							})
						) : (
							<div class="history-img-item empty-item col-span-6">
								<div class="empty-container">
									<el-image style="width: 100%;height:100%" src={EmptyImg} hide-on-click-modal fit="fill" />
									<div class="text">暂无图片</div>
								</div>
							</div>
						)}
					</div>
					<div class="pt-4 pl-4 pb-4">
						<el-pagination
							v-model:current-page={state.pageable.pageIndex}
							v-model:page-size={state.pageable.pageSize}
							background
							layout="total, prev, pager, next"
							onCurrentChange={handleSizeChange}
							v-model:total={state.pageable.total}
						/>
					</div>
				</div>
			);
		};
	}
});
